這次要來寫的是光點公轉的效果
用 css 畫出光點跟軌道 再讓它做旋轉的效果
一樣把基本架構寫好

<div class="centered">
  <div class="glowing-wrapper">
  <div class="glowing">
    <span></span>
    <span></span>
    <span></span>
  </div>
    </div>
</div>

然後設定好基本的 css
這邊使用到比較特殊的部分是
calc(em - px) 使用運算來對齊相對尺寸的位置
多重的box-shadow 創造出光圈的層次感
並將每個span的動畫時間設定不同，才能創造出有些光點較快，有些較慢的狀態

body {
  background: #222222;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
}
.glowing-wrapper{
  width:100%;
}

.glowing {
  position: absolute;
  width: 12em;
  height: 12em;
  transform: translate(-50%, -50%);
}

.glowing:before{
  content: "";
  position: absolute;
  left: calc(6em - 8px);
  top: calc(6em - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:rgba(67,232,216);
  box-shadow: 
    0 0 0 5px rgba(67,232,216, .1),
    0 0 20px rgba(67,232,216, 1),
    0 0 40px rgba(67,232,216, 1),
    0 0 60px rgba(67,232,216, 1);
}

.glowing span {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
}

.glowing span:before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.glowing span:nth-of-type(1) {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: rotate-ani 4s linear infinite;
}

.glowing span:nth-of-type(1):before {
  background: rgba(255, 65, 65, 1);
  box-shadow: 
    0 0 0 5px rgba(255, 65, 65, .1),
    0 0 20px rgba(255, 65, 65, 1),
    0 0 40px rgba(255, 65, 65, 1),
    0 0 60px rgba(255, 65, 65, 1);
}

.glowing span:nth-of-type(2):before {
  background: rgba(247, 245, 41);
  box-shadow: 
    0 0 0 5px rgba(247, 245, 41,.1),
    0 0 20px rgba(247, 245, 41, 1),
    0 0 40px rgba(247, 245, 41, 1),
    0 0 60px rgba(247, 245, 41, 1);
}

.glowing span:nth-of-type(3):before {
  background: rgba(247, 70, 208);
  box-shadow: 
    0 0 0 5px rgba(247, 70, 208,.1),
    0 0 20px rgba(247, 70, 208, 1),
    0 0 40px rgba(247, 70, 208, 1),
    0 0 60px rgba(247, 70, 208, 1);
}

.glowing span:nth-of-type(2) {
  top: 2em;
  left: 2em;
  right: 2em;
  bottom: 2em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: rotate-ani 2s linear infinite;
}

.glowing span:nth-of-type(3) {
  top: 4em;
  left: 4em;
  right: 4em;
  bottom: 4em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: rotate-ani 3s linear infinite;
}

接下來把動畫效果寫進來

@keyframes rotate-ani{
  0%{transform:rotate(0deg);}
   100%{transform:rotate(360deg);}
}

到這邊就完成了
一樣附上本次的 codepen 如下
https://codepen.io/UHU/pen/RevjXb